<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
		<title></title>
		<style>

			body{
				max-width: 600px;
				margin: auto;
			}

			.cj_title{
				text-align: center;
				line-height: 30px;
				width: 100%;
				height: 40px;
				margin-top: 10%;
				line-height: 40px;
			}
			.cj_body{
				width: 90%;
				margin: auto;
				margin-top: 5%;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				transition: all 3s linear 0s;
			}
			.cj_item{
				width: 100px;
				height: 120px;
				margin-top: 5px;
				box-shadow: 3px 3px 10px #888888;
				border-radius: 5px;
				position: relative;
				transition: all 2s ease-in-out 0s;
			}
			.cj_item_xuanzhong{
				border: 1px solid #007DDB;
			}
			.jp_fm{
				top: 0;
				position: absolute;
				width: 100%;
				height: 120px;
				box-shadow: 3px 3px 15px #888888;
			}
			.jp{
				display: none;
				text-align: center;
				top: 0;
				position: absolute;
				width: 99%;
				height: 120px;
				line-height: 120px;
			}
			
			 .jp_good_pic{		
				width: 50px;
				height: 50px;
				display: block;
				margin: auto;
				margin-top: 10px;
				border-radius: 9px;
				overflow: hidden;
				animation:jpTpShowAnima  3s;	
			}
			
			
			.jpShow{
				/* transition: all 2s linear 1s; */
				display:block;
				animation:jpShowAnima  3s;	
				line-height: 120px;
			}
			@keyframes jpShowAnima{
				from{color: rgba(0,0,0,0);}
				to{color: rgba(0,0,0,1);}
			}
			@keyframes jpTpShowAnima{
				from{opacity:0.0;}
				to{opacity:1.0;}
			}
			
			.jp_fm:hover{
				/* animation: fm_top 3s ; */
				/* transition: all 3s ease-in-out 0s;
				transform: translateY(-10050px); */
			}
			
			.top{
				transition: all 3s ease-in-out 0s;
				transform: translateY(-10050px);		
			}
			
			.cj_body_restart{
				/* transform-origin: center left; */
				animation: fanzhuan 2s;
			}
			
			@keyframes fanzhuan{
				/* 0%{
					transform: rotateY(0deg);
				}
				30%{
					transform: rotateY(360deg);
				}
				50%{
					transform: rotateY(720deg);
				}
				80%{
					transform: rotateY(1440deg);
				}
				100%{
					transform: rotateY(2880deg);
				} */
				0%{
					transform: translateX(0%);
				}
				30%{
					transform: translateX(-300px);
				}
				50%{
					transform: translateX(500px);
				}
				80%{
					transform: translateX(-100px);
				}
				100%{
					transform: rotateY(500px);
				}
			}
			.restart{
				width: 40%;
				height: 30px;
				background-color: #d83b50;
				text-align: center;
				line-height: 30px;
				color: #ffffff;
				border-radius: 5px;
				margin: auto;
				margin-top: 20px;
				box-shadow: 3px 3px 10px #000000;
			}
			
			.restart:active{
				box-shadow: 3px 3px 10px #ffffff;
			}
			
			
			.zj_tip{
				position: fixed;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				margin: auto;
				background: rgba(0,0,0,.5);
				z-index: 1000;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.zj_tip_hide{
				display: none;
			}
			.zj_tip_model{
				width: 80%;
				height: 150px;
				border-radius: 5px;
			    background-color: #ffffff;
				animation: tipAima 2s;
				display: flex;
				flex-direction: column;
			}
			@keyframes tipAima{
				0%{
					transform: translateY(-1000px);
				}
				50%{
					transform: translateY(-30px);
				}
				100%{
					transform: translateY(0px);
				}
			}
			.zj_tip_model_title{
				flex: 2;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: crimson;
				color: #ffffff;
			}
			.zj_tip_model_text{
				flex: 6;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 10px;
			}
			.zj_tip_model_btn{
				flex: 3;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.zj_tip_model_btn button{
				width: 100px;
				height: 30px;
				text-align: center;
				line-height: 30px;
				background-color: #007DDB;
				color: #ffffff;
				border: none;
				border-radius: 5%;
				box-shadow: 3px 3px 10px #000000;
			}
			.zj_tip_model_btn button:active{
				box-shadow: 3px 3px 10px #ffffff;
			}
			.orderList{
				position: fixed;
				right: 10px;
				bottom: 10px;
				margin-right: 0px;
				width: 40px;
				height: 40px;
				padding: 0;
			/* 	background-color: rgba(0,0,0,.3); */
			} 
			
			.orderList img{
				margin: 0;
				width: 100%;
				height: 100%;
				/* box-shadow: 3px 3px 10px #000000;	 */
			}
			.orderList img:active{
				/* box-shadow: 3px 3px 10px #ffffff; */	
			}
			
			.orderListBody{
				width: 90%;
				height: 400px;
				position: fixed;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				margin: auto;
				border: 1px solid #c27878;
				border-radius: 10px;
				background-color: #ffffff;
				overflow: auto;	
				display: none; 
			}
			.orderListBodyShow{
				display: block;
				animation: showOrderList 1s;
			}
			@keyframes showOrderList{
				from{opacity:0;}
				to{opacity:1;}
			}
			.orderListItem{
				height: 60px;
				width: 90%;
				margin: auto;
				display: flex;
				padding-bottom: 5px;
				border-bottom:1px  solid #d8d6b3;
			}
			.orderListItemImg{
				flex: 2;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.orderListItemName{
				flex: 5;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.orderListItemTime{
				flex: 4;
				display: flex;
				flex-direction: column;
			}
			.orderListItemTime_status{
				font-size: 13px;
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: flex-start;
			}
			.orderListItemTime_time{
				flex: 1;
				font-size: 5px;
				display: flex;
				align-items: center;
				justify-content: flex-start;
			}
			.orderListItem:hover{
				border-left:1px solid #9f9fbd;
				border-right:1px solid #9f9fbd;
				/* border-radius: 5px; */
			}
			.qrcodeBg{
				width: 100px;
				height: 120px;
				position: fixed;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				display: none;
			}
			.qrCodeShow{
				display:block;
			}
		</style>
	</head>
	<body>
		<div id="app" v-if="appShow">
			<div class="cj_title">您还有<font size="20px" color="red">{{mycount}}</font>次机会</div>
			<div class="zj_tip" v-bind:class="{zj_tip_hide:tipisShow}">
				<div class="zj_tip_model">
					<div class="zj_tip_model_title">您抽中的是</div>
					<div class="zj_tip_model_text">{{message}}</div>
					<div class="zj_tip_model_btn"><button v-on:click="showTip" >确定</button></div>
				</div>
			</div>
			<div id="cjbody" class="cj_body">
				<div class="cj_item" v-for="(item,index) in  jpitem" v-bind:class="{cj_item_xuanzhong:index == xzIndex}" >
					<img  class="jp_fm" v-bind:class="{top:itemIndex === index || itemIndex == -2}"  v-on:click="openCj(index)"  src="http://1900th.com/files/8db9a5fa-8a56-4d02-951c-ebd61ce492be.png" />
					<div class="jp" v-bind:class="{jpShow:itemIndex === index || itemIndex == -2}">
					<!-- <img v-bind:class="{jp_good_pic:itemIndex === index || itemIndex == -2}"  v-bind:src="item.pic"> </img> -->
						{{item.name}}
					</div>
				</div>
			</div>
			<div class="restart"  v-on:click="restart">
				{{name}}
			</div>
			<div class="orderList"  v-on:click="getGoodList">
				<img src="http://1900th.com/files/b6b3e79c-971e-43b9-a83f-31e238c55177.png" >
			</div>
			<div class="orderListBody" v-bind:class="{orderListBodyShow:isShowOrderList}">	
			<div style="width: 20px; height:20 px; right: 0px; position: absolute; border-radius: 50%; background-color: red;  color: #ffffff; z-index: 1000; text-align: center; line-height: 20px;"v-on:click="getGoodList" >X</div>
				<div class="orderListItem" v-for="(item,index) in orderList" v-on:click="openQrcode(item.orderNo,item.status)" >
					<div class="orderListItemImg">{{item.orderNo}}</div>
					<div class="orderListItemName">{{item.goodName}}</div>
					<div class="orderListItemTime">
						<div class="orderListItemTime_status" v-text="item.status === 0 ?'未使用':'已使用'"></div>
						<div class="orderListItemTime_time" >{{item.createTime}}</div>
					</div>
				</div>
			</div>
			
			<div class="qrcodeBg" v-bind:class="{qrCodeShow:qrCodeShow}" v-on:click="closeQrde">
				<div id="qrcode" >
					
				</div>
				<div style="display: flex; justify-content: center; align-items: center; background: #ffffff;">
					扫码核销
				</div>
			</div>
			
		</div>
	</body>
	<script src="http://1900th.com/js/vue.js"></script>
	<script src="http://1900th.com/js/jquery.min.js"></script>
	<!--有冲突放最后 保证vue执行-->
	<script src="/js/layui/duli/layer.js" type="text/javascript" charset="utf-8"></script>
	<script src="/js/jquery.qrcode.min.js" type="text/javascript" charset="utf-8"></script>
	
	<script th:inline="javascript">
		
		var app = new Vue({
			el:"#app",
			data:{
				name: '再试试手气',
				jpitem:9,
				topShow:false,
				jpShow:false,
				itemIndex:-1,
				mycount:[[${count}]],
				isDown:true,
				message:'啥也没抽到',
				tipisShow:true,
				appShow:false,
				configId:[[${configId}]],
				xzIndex: -1,
				orderList:[],
				isShowOrderList:false,
				qrCodeShow:false,
				interval:''
			},
			methods:{
				openCj (e){
					let _this  = this
					if(!_this.isDown){
						return
					}
					_this.isDown =false						
					
					if(_this.mycount > 0){
						$.ajax({
						 type: "POST",
						 url: "/f/choujiang/getCzGood",
						 data: {
							 configId:_this.configId,
							 memberIndex:e,
						 },
						 success: function(data){
							 if(data.code === 0){
								 _this.jpitem = data.goodList
								 _this.itemIndex = e
								 _this.mycount -= 1
								 _this.tipisShow = false
								 _this.message = _this.jpitem[e].name
								 _this.xzIndex = e
							 }else{
								 layer.msg(data.msg)
								_this.isDown = true
							 }			
						 }          
						})	
						
						//this.itemIndex = 2
					}else{
						layer.msg('您的抽奖机会已用完')
					}
				},
				restart (){
					var docList =  document.getElementsByClassName("jp_fm")
					var textList  = document.getElementsByClassName("jp")
					let _this  = this 
					_this.isShowOrderList = false;
					_this.qrCodeShow = false
					clearInterval(_this.interval);
					_this.itemIndex  = -1
					_this.xzIndex = -1
					document.getElementById("cjbody").classList.remove("cj_body_restart")
					setTimeout(function(){
						document.getElementById("cjbody").classList.add("cj_body_restart")
					},2)
					setTimeout(function(){
						_this.isDown = true
					},2000)
				},
				showTip(){
					//隐藏tip
					this.tipisShow = true;
					//设置按钮可按
					this.isDown = false
					this.itemIndex = -2		
					this.qrCodeShow = false
					clearInterval(this.interval);
					//this.restart()
				},
				getGoodList() {
					let _this = this
					_this.qrCodeShow = false
					if(_this.isShowOrderList){
						_this.isShowOrderList = false;
					}else{
						$.ajax({
						 type: "POST",
						 url: "/f/choujiang/getChoujianngOrderList",
						 data: {				 
						 },
						 success: function(data){
							 if(data.code === 0){
								  _this.orderList = data.l
								  _this.isShowOrderList = true;
							 }else{
								 layer.msg(data.msg)
							 }			
						 }          
						})
					}		
				},
				openQrcode(val,status){
					if(status == 1){
						layer.msg('该奖品已经核销过了')
						return
					}

					let _this = this
					_this.qrCodeShow = true
					 $("#qrcode").html("").qrcode({
							width:100,
							height:100,
							text:val
					})	 
					_this.interval =  setInterval(function(){
						 $.ajax({
						  type: "POST",
						  url: "/f/choujiang/checkIsHexiao",
						  data: {	
							  orderNo:val
						  },
						  success: function(data){
						 	 if(data.code === 0){
						 		 _this.qrCodeShow = false
								 layer.msg('核销成功')
								 _this.getGoodList()
								 clearInterval(_this.interval);
						 	 }		
						  }          
						 })
					 },1000);
					
				},
				closeQrde(){
					clearInterval(this.interval);
					this.qrCodeShow = false
				}
			},
			created (){
			let _this = this
			_this.appShow = true
			 $.ajax({
				 type: "POST",
				 url: "/f/choujiang/getChoujianngGoodList",
				 data: {
					 configId:_this.configId
				 },
				 success: function(data){
					console.log(data)
					_this.jpitem = data.goodCount
				 }          
				})
			}
		})
		

		
	</script>
</html>
